import React from 'react';
import { useState, useEffect } from 'react'
import type { FC } from 'react';
import returnLeft from '../../../public/Icon/return_white_icon.png'
import { Image, Input, Button } from 'antd-mobile'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
const Index: FC = ({ }) => {
  const [state, setState] = useState(1);
  const navigate = useNavigate()
  const [email, setEmail] = useState("");
  const [verifyCode, setVerifyCode] = useState("");
  const [passWord, setPassWord] = useState("");
  const [passWordTrue, setPassWordTrue] = useState("");
  const [visible, setVisible] = useState(false);
  const [visibleTrue, setVisibleTrue] = useState(false);

  const handleGetVerifyCode = () => {
    // TODO: 实现获取验证码逻辑
    console.log('获取验证码', email);
  }

  const onOk = () => {
    // TODO: 实现完成密码重置逻辑
    console.log('完成密码重置', { passWord, passWordTrue });
  }
  useEffect(() => {

  }, []);
  const verifyDom = () => {
    return (
      <div className="forgot-password-container">
        {/* 白色卡片 */}
        <div className="forgot-password-card">
          {/* 邮箱输入框和获取验证码按钮 */}
          <div className="input-group-with-button">
            <div className="input-wrapper">
              <Input
                placeholder='请输入邮箱账号'
                className="forgot-input"
                value={email}
                onChange={setEmail}
              />
            </div>
            <div style={{ width: "120px" }}>
              <Button
                color='primary'
                fill='solid'
                size="small"
                className="verify-button"
                onClick={handleGetVerifyCode}
              >
                获取验证码
              </Button>
            </div>
          </div>

          {/* 验证码输入框 */}
          <div className="input-group">
            <Input
              placeholder='请输入验证码'
              className="forgot-input"
              value={verifyCode}
              onChange={setVerifyCode}
            />
          </div>
        </div>

        {/* 下一步按钮 */}
        <div className="next-button-container">
          <Button
            block
            size='large'
            className="next-button"
            onClick={() => setState(2)}
          >
            下一步
          </Button>
        </div>
      </div>
    )
  }
  const settingDom = () => {
    return (
      <div className="forgot-password-container">
        <div className="setPassMain">
          <div style={{ display: "flex" }}>
            <div><Input
              type={visible ? 'text' : 'password'}
              placeholder="请输入密码"
              value={passWord}
              onChange={setPassWord}
            /></div>
            <div
              className="password-toggle"
              onClick={() => setVisible(!visible)}
            >
              {!visible ? (
                <EyeInvisibleOutline fontSize={20} />
              ) : (
                <EyeOutline fontSize={20} />
              )}
            </div>
          </div>
          <div style={{ display: "flex" }}>
            <div> <Input
              type={visibleTrue ? 'text' : 'password'}
              placeholder="请确认密码"
              value={passWordTrue}
              onChange={setPassWordTrue}
            /></div>
            <div
              className="password-toggle"
              onClick={() => setVisibleTrue(!visibleTrue)}
            >
              {!visibleTrue ? (
                <EyeInvisibleOutline fontSize={20} />
              ) : (
                <EyeOutline fontSize={20} />
              )}
            </div>
          </div>
        </div>
        <div style={{ width: "80%", marginTop: "100px" }}>
          <Button
            block
            size='large'
            className="complete-button"
            onClick={() => onOk()}
          >
            完成
          </Button>
        </div>
      </div>
    )
  }
  return (
    <div className="forgot-password-page">
      {/* 顶部导航栏 */}
      <div className="forgot-password-header">
        <div
          className="back-button"
          onClick={() => {
            if (state === 1) {
              navigate(-1)
            } else {
              setState(1)
              setPassWord("")
              setPassWordTrue("")
              setVisible(false)
              setVisibleTrue(false)
            }
          }}
        >
          <Image src={returnLeft} width="24px" height="24px" />
        </div>
        <div className="header-title">
          {state === 1 ? "忘记密码" : "设置新密码"}
        </div>
        <div className="header-placeholder"></div>
      </div>

      {/* 内容区域 */}
      {state === 1 ? verifyDom() : settingDom()}
    </div>
  );
};

export default Index;